<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center my-5>
      <v-flex md6 my-5>
        <div class="mb-4">
          <a :href="mission.interlinkage">Check more details on Amazon.</a>
        </div>

        <img :src="mission.productImg" alt />
      </v-flex>
      <v-flex md6 my-5 d-flex column align-start pl-4>
        <v-flex md12 title mb-5 text-xs-left>{{ mission.titleEnglish }}</v-flex>
        <v-flex md12>
          <span class="real-price mr-3" d-inline-block>$ 0.00</span>
          <span class="original-price">$ {{ mission.price }}</span>
        </v-flex>
        <v-flex md12>
          <span
            class="real-price"
          >Refund: $ {{ mission.commission ? mission.commission.toFixed(2) : '' }}</span>
        </v-flex>
        <v-flex md12 title my-3>{{ mission.taskType | TaskType }}</v-flex>
        <v-flex md12>
          <v-btn color="primary" @click="onJoinMissionClicked">
            <span>Join Mission</span>
          </v-btn>

          <v-btn color="red" dark @click="onShare">
            <span>Share to earn $5</span>
          </v-btn>
        </v-flex>
        <v-flex md12>
          <div class="detail-desc">
            <div class="title">Mission Details</div>

            <div class="desc-content">
              <ul class="desc-list">
                <li>
                  1.Please search the keyword "
                  <em class="emp">{{ mission.keyword }}</em> "on the given platform: "
                  <em class="emp">{{ mission.platform | Platform }}</em>"
                </li>
                <li>
                  2. Normally you could find our product "on the 1st page", if not, please continue checking until you find our listing. "Asin:
                  <em
                    class="emp"
                  >{{ mission.productAsin }}</em>
                </li>
                <li>3 Please don't go directly to product page anyhow. Please browse other listings as well and then add our product to cart after several minutes, then check out.</li>
                <li>
                  4. last step, Please double check if the ASIN of the product is the same as the one provided by the merchant to avoid buying the wrong product. Asin:
                  <em
                    class="emp"
                  >{{ mission.productAsin }}</em>
                </li>
                <li>5. Please test the products and leave in the given platform a review about your feedback with no less than 1 pictures around 2 days after your receipt of the product.</li>
                <li>We believe your comments on the products will Mission great helps for the merchandiser brand broadcasting. You are encouraged to write a message here to the brand through busibusy if you have more suggestions on products. Much thanks again for your participation of the MBTP (Manufacturer's brand test program).</li>
              </ul>
            </div>
          </div>
        </v-flex>
      </v-flex>
    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import { forEach } from "lodash";
import { KV } from "@/utils/type";
import { PageOptions, TopupStatusKV } from "@/utils/constants";
import { ReqProfitIncome, ReqTaskInfo } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
import Cookie from 'js-cookie';
declare const $Vue: Vue;

@Component
export default class Missions extends Vue {

  private mission: any = {};

  private getTime(date: string) {
    return getTime(date);
  }

  protected mounted() {

    let de = sessionStorage.getItem('MissionDetail');
    if (de) {
      this.mission = JSON.parse(de);
    } else {

    }
  }

  private onJoinMission() {

  }

  private onShare() {

  }

  private onJoinMissionClicked() {
    this.joinMission(this.mission);
  }

  /**
   * 任务抢单 抢单之后可以通过上传 订单和评价截图 用于完成任务
   */
  private async joinMission(task: any) {
    const params = {
      taskId: task.taskId,
    };
    const { data } = await Api.competeOrder.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      task.scalped = true;
      $Vue.$emit("snackbar", {
        text: data.message,
      });
      this.$router.push({
        name: 'MyMissions',
      })
    } else {
      alert(data.message);
    }
  }

}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);

.mission-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  .image-wrapper {
    height: 10rem;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .info-wrapper {
    border-radius: 9px;
    padding: 9px;
    .title-wrapper {
      height: auto;
      width: 100%;
    }
  }
}

.info-detail {
  .text-left {
    text-align: left;
  }
}

em.emp {
  color: #f44556;
}
.detail-desc {
  .title {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
}
.desc-content {
  padding: 0.3rem;
  ul {
    padding-top: 1rem;
    li {
      text-align: left;
      margin: 0.8rem 0;
    }
  }
}

.real-price {
  font-size: 25px;
  font-weight: 800;
  color: rgb(238, 169, 39);
}
.original-price {
  font-size: 24px;
  color: rgb(150, 150, 150);
  font-weight: 800;
  text-decoration-line: line-through;
}

a {
  text-decoration-line: underline;
}
</style>


